<template>
	<el-dialog title="查看反馈详情" :visible.sync="visible" top="0" width="992px" append-to-body>
		<el-descriptions v-bind="desConfig">
			<el-descriptions-item label="纠错标题" :span="3">{{ data.title }}</el-descriptions-item>
			<el-descriptions-item label="用户电话">{{ data.phone }}</el-descriptions-item>
			<el-descriptions-item label="用户邮箱">{{ data.email }}</el-descriptions-item>
			<el-descriptions-item label="错误类型" :contentStyle="{ width: '200px' }">{{ data.errorType }}</el-descriptions-item>
			<el-descriptions-item label="资源地址" :span="3">{{ data.url }}</el-descriptions-item>
			<el-descriptions-item label="纠错依据" :span="2">{{ data.source }}</el-descriptions-item>
			<el-descriptions-item label="用户姓名">{{ data.userName }}</el-descriptions-item>
			<el-descriptions-item label="纠错描述" :span="3">
				<div v-html="data.content"></div>
			</el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			visible: this.value,
			desConfig: {
				column: 3,
				border: true,
				size: 'medium',
				class: 'correction_detail',
				labelStyle: { width: '80px' }
			}
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			console.log(this.data);
		}
	},
	methods: {}
};
</script>
<style lang="scss" scoped>
.correction_detail::v-deep {
	flex: 1;
	overflow: hidden;
}
</style>
